<template>
    <div class="ml-16px mr-16px content-container">
        <Filter :websites="state.websites" @update:data="handleUpdateData" @update:day="handleUpdateDay">
            <template v-slot:flowAnalysis>
                <b class="text-14px">来源</b>
                <div class="w-120px ml-10px mr-16px">
                    <el-select v-model="state.source" placeholder="请选择" size="default" @change="handleSourceChange">
                        <el-option v-for="item in state.sources" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </div>
            </template>
        </Filter>
        <Statistics :statistics="state.statistics" />
        <div class="pl-26px pr-26px pb-26px">
            <LineChart :LineChartData="state.LineChartData" />
        </div>
        <div class="pl-26px pt-26px pr-26px pb-26px">
            <FlowList :data="state.IPUVPVData" />
            <div class="pt-16px pl-26px pr-26px page-container flex flex-center">
                <Pagination v-if="state.IPUVPVData.length > 0" v-model:total="state.page.total"
                    v-model:page="state.page.curPage" v-model:limit="state.page.pageSizes" @pagination="handlePage" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Filter from './components/Filter.vue'
import Statistics from './components/Statistics.vue'
import FlowList from './components/FlowList.vue'
import LineChart from './components/LineChart.vue'
import { getFlowAnalysisApi, getFlowAnalysisLineChartApi, getSourceStatisticsApi } from '@/api/sem/index'
import { IRegion, ISite, ISourceLineChart, IStatistics } from '@/api/sem/types'

const state = reactive({
    day: 1,
    startTime: '',
    endTime: '',
    device: 0,
    source: '',
    sources: <{ name: string }[]>[],
    website: '',
    websites: <ISite[]>[],
    IPUVPVData: <IRegion[]>[],
    LineChartData: <ISourceLineChart><unknown>{},
    PieChartData: [],
    statistics: <IStatistics>{
        IP: 0,
        PV: 0,
        UV: 0,
        JumpOut: '',
        AverageDuration: ''
    },
    page: {
        total: 0,
        curPage: 1,
        limit: 10,
        pageSizes: 10,
    },
})

let params = {
    start: state.day,
    begintime: state.startTime,
    endtime: state.endTime,
    url: state.website,
    equ: state.device,
    source: state.source,
    pn: state.page.curPage
}

async function getFlowAnalysis(params: any) {
    state.IPUVPVData = []
    state.PieChartData = []
    const res: ResType = await getFlowAnalysisApi(params)
    if (res.code == 200) {
        state.IPUVPVData = res.data
        state.websites = res.weburllist
        
        state.page.curPage = res.page as number
        state.page.pageSizes = res.pagesize as number
        state.page.total = res.count
    }
}

async function getFlowAnalysisLineChart(params: any) {
    state.IPUVPVData = []
    state.LineChartData = <ISourceLineChart><unknown>{}
    const res: ResType = await getFlowAnalysisLineChartApi(params)
    if (res.code == 200) {
        state.LineChartData = res.data
        state.websites = res.weburllist
    }
}

async function getSourceStatistics(params: any) {
    const res: ResType = await getSourceStatisticsApi(params)
    if (res.code === 200) {
        state.statistics.IP = res.IPCount
        state.statistics.PV = res.PVCount
        state.statistics.UV = res.UVCount
        state.statistics.JumpOut = res.BounceRate
        state.statistics.AverageDuration = res.VisitTime
        state.sources = res.sourcelist
    }
}

async function handleUpdateData(value: any) {
    const { device, endTime, startTime, website, source } = value
    state.device = device
    state.endTime = endTime
    state.startTime = startTime
    state.website = website
    state.source = source
    params = {
        start: state.day,
        begintime: state.startTime,
        endtime: state.endTime,
        url: state.website,
        equ: state.device,
        source: state.source,
        pn: 1
    }
    getFlowAnalysis(params)
    getFlowAnalysisLineChart(params)
    getSourceStatistics(params)
}

async function handleUpdateDay(value: any){
    const { day } = value
    state.day = day
    state.endTime = ''
    state.startTime = ''
    params = {
        start: state.day,
        begintime: state.startTime,
        endtime: state.endTime,
        url: state.website,
        equ: state.device,
        source: state.source,
        pn: 1
    }
    getFlowAnalysis(params)
    getFlowAnalysisLineChart(params)
    getSourceStatistics(params)
}

function handleSourceChange(){
    params.source = state.source

    getFlowAnalysis(params)
    getFlowAnalysisLineChart(params)
    getSourceStatistics(params)
}

function handlePage(value: any) {
    state.page.curPage = value.page
    state.page.limit = value.limit
    params.pn = value.page
    getFlowAnalysis(params)
}

onMounted(() => {
    getFlowAnalysis(params)
    getSourceStatistics(params)
    getFlowAnalysisLineChart(params)
})
</script>

<style lang="scss" scoped></style>